<template>
	<NavBarVue :title="details?.articleTitle" />
	<view class="top">
		<view class="zuo" style="display: flex;align-items: center;">
			<view class="ttop">
				<view class="tx">
					<base-cover-image :src="details?.userPic" />
				</view>
				<view style="padding-left: 5px;">
					<view style="font-size: 28rpx; font-weight: 600;" @click="toPersonalIndex()">{{details?.userName}}</view>
					<view style="color:#ccc; display: flex;" @click="toActivityDeatils">
						<u-icon name="map" size="18" color="#ccc"></u-icon>
						<view style="font-size:24rpx;">{{details?.activityWord}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 关注 -->
		<view class="you" style="display: flex;">
			<view class="gz" @click="attention">关注</view>
			<image class="share" src="/static/share.png" @click="show = true" />
		</view>
	</view>
	<view class="zong">
		<view class="box">
			<!-- 底部弹框 -->
			<u-popup :show="show" customStyle="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;" mode="bottom"
				bgColor="#f3f3f3" @close="close" @open="open">
				<view>
					<view class="titf">
						<text>分享至</text>
					</view>
					<view class="icons">
						<view class="icoul">
							<view class="icoli" v-for="item in shal" :key="item.id">
								<base-cover-image :src="''" />
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
					<button @click="close" style="font-size: 28rpx;height: 120rpx;">取消</button>
				</view>
			</u-popup>
			<!--0元购车弹框-->
			<u-popup class="gocar" :show="shows" @close="closes" @open="opens"
				customStyle="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;">
				<view class="goucar">
					<view class="goucar_img">
						<base-cover-image :src="details?.articleMainPic" />
					</view>
					<view class="botgcar">
						<view class="lefgcar">
							<view style="font-weight: 600;font-size: 40rpx;">{{details?.activityWord}}</view>
							<view style="font-size: 24rpx;color:#999;margin-top: 5rpx;">{{details?.articleLabel}}</view>
						</view>
						<view class="btn" @click="getCoupon">获取优惠券</view>
					</view>
				</view>
			</u-popup>
			<view class="snr">
				<swiper class="lunb" indicator-dots indicator-color="#fff" indicator-active-color="red" autoplay interval="2000"
					circular>
					<swiper-item v-for="(item, idx) in [details?.articleCover]" :key="idx">
						<view class="item">
							<image :src='item' />
							<button class="items" @click="shows= true" v-if="details?.source == 2">
								 {{ details?.activityWord }}
							</button>
						</view>
					</swiper-item>
				</swiper>
				<view class="nr">
					<view style="font-size:32rpx;font-weight:500;color:#6D6D6D;margin:16rpx 0rpx">
						{{details?.articleTitle}}
					</view>
					<view style="font-size: 28rpx;color:#666;margin-bottom: 28rpx;">
						{{details?.articleDetail}}
					</view>
					<view style="font-size:28rpx;color:#333333">{{details?.articleDigest}}</view>
					<view>
						<base-cover-image :src="details?.articleMainPic" />
					</view>
					<view class="aas">
						<span>{{showDate}}</span> 
						<span>{{cityName}}</span>
					</view>
					<view class="plas">共计{{1000}}条评论</view>
					<view class="ping">
						<view class="tx">
							<base-cover-image :src="details?.userPic" />
						</view>
						<!-- input -->
						<input type="text" class="ping_inp" placeholder="爱评论的人运气不会差" style="height: 72rpx;" />
					</view>

					<view class="ping" v-for="item in plist" :key="item.id">
						<!-- 头像 -->
						<view class="tx">
							<base-cover-image :src="item.imgs" />
						</view>
						<!-- 右侧内容 -->
						<view class="yoww">
							<view class="yoww_con">
								<div class="con">
									<view class="yoww_name">{{item.name}}</view>
									<!-- <view class="" style="display: flex;"> -->
									<span style="font-size: 28rpx; color:#666">{{item.nr}}</span>
									<span class="sjtim">{{item.time}}</span>
								</div>
								<view class="lick">
									<u-icon name="heart" style="margin-left: 22rpx" color="#ccc" size="18"></u-icon>
									<view style="font-size: 28rpx; color:#999">{{item.zan}}</view>
								</view>
							</view>

							<view class="ping" v-for="item in plist" :key="item.id">
								<!-- 头像 -->
								<view class="child_tx">
									<base-cover-image :src="item.imgs" />
								</view>
								<!-- 右侧内容 -->
								<view class="yoww">
									<view class="yoww_con">
										<div class="con">
											<view class="yoww_name">{{item.name}}</view>
											<!-- <view class="" style="display: flex;"> -->
											<span style="font-size: 28rpx; color:#666">{{item.nr}}</span>
											<span class="sjtim">{{item.time}}</span>
										</div>
										<view class="lick">
											<u-icon name="heart" style="margin-left: 20rpx" color="#ccc" size="22"></u-icon>
											<view style="font-size: 28rpx; color:#999">{{item.zan}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom" :style="{display: 'flex', paddingBottom: safeAreaBottom + 20 + 'rpx', zIndex: 100, height: 112 + safeAreaBottom + 'rpx'}">
			<view class="cbds">
				<input type="text" placeholder="发条有爱评论～" />
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view class="bottom_list" @click="likeCountClick">
					<!-- <u-icon name="heart" color="#ccc" size="24"></u-icon> -->
					<up-icon name="heart" v-if="!details?.islike" color="#ccc" size="24"></up-icon>
					<up-icon name="heart-fill" color="#ff546a" v-else size="24"></up-icon>
					<view style="font-size: 24rpx; color:#777777; margin-left: 10rpx;">{{details?.likeCount}}</view>
				</view>
				<view class="bottom_list" @click="favoriteCountClick">
					<u-icon name="star" v-if="!details?.isfavorite" color="#ccc" size="24"></u-icon>
					<u-icon name="star-fill" color="#ff546a" size="24" v-else></u-icon>
					<view style="font-size: 24rpx; color:#777777; margin-left: 10rpx;">{{details?.favoriteCount}}</view>
				</view>
<!-- 				<view class="bottom_list">
					<u-icon name="chat" color="#ccc" size="24"></u-icon>
					<view style="font-size: 24rpx; color:#777777">{{details?.ptxt}}</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, onMounted, reactive, ref } from "vue"
	import { useUserReceive, useArticleStore } from '@/store'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {formatTime} from '@/utils/formatDate'
	import {getLocationFunc} from '@/utils/getLocation'
	import {
		safeAreaBottom
	} from '@/utils/getMenuData'

	const articleStore = useArticleStore()
	//显示隐藏
	const show = ref(false)
	const shows = ref(false)
	const open = () => {
		show.value = true
	}
	const close = () => {
		show.value = false
	}
	const opens = () => {
		shows.value = true
	}
	const closes = () => {
		shows.value = false
	}
	const onback = () => {
		uni.navigateBack({
			delta: 2
		});
	}
	const toPersonalIndex = () => {
		uni.navigateTo({
			url: `/pages/tab-index/personal/index?id=${details.value?.userId}&source=${details.value?.source}`
		})
	}
	const toActivityDeatils = () => {
		if(details?.value?.activityId == 0) {
			return 
		} 
		uni.navigateTo({
			url: `/pages/tab-index/personal/activity-details/index?id=${details.value?.activityId}&origin=normal`
		})
	}
	const userReceive = useUserReceive()
	// 用户获取优惠劵
	const getCoupon = async () => {
		const res = await userReceive.userReceiveSave({
			"activityId": details.value?.activityId,
			"couponCode": "",
			"couponId": 0,
			"receiveChannel": 0,
			"shopId": details.value?.shopId,
			"userId": details.value?.userId
		})
		console.log(res, "| res");
		if (res?.code === '0') {
			uni.showModal({
				content: '领券成功',
				showCancel: false,
				success: () => {
					shows.value = false
				}
			})
		}
	}
	let Id = ref(null)
	onLoad((e) => {
		Id.value = e.id
	})
	let cityName = ref('')
	let details = computed(() => {
		return articleStore.articleDetailData.details;
	})
	let showDate = ref('')
	onMounted(async () => {
		await articleStore.articleDetail({ id: Id.value })
		showDate.value = formatTime(details.value?.updateTime)
		getLocationFunc({
			cityName: '',
			latitude: details.value?.latitude,
			longitude: details.value?.longitude
		}).then((res) => {
			cityName.value = res?.cityName
		})
	})
	
	// 关注
	const attention = () => {
		uni.showToast({
			title: "关注"
		})
	}
	const plist = reactive([
		{ id: 0, name: '王晓晓', nr: "下地铁再走两步就到", zan: "650", imgs: "/static/images/1002.png", time: "", btnone: "作者赞过", btntwo: "作者", },
		{ id: 1, name: '李红达', nr: "改天去看热水的风险二个好人是古代中国合同黑色红色看", zan: "350", imgs: "/static/images/1003.png", time: "" },
		{ id: 2, name: '王大拿', nr: "啊hers公噶尔给人打工司如果输入格式的", zan: "550", imgs: "/static/images/1004.png", time: "前天：18:18" },
		{ id: 3, name: '陈莉莉', nr: "走，出热色赫特河阿惹萨二世灌水灌水发", zan: "250", imgs: "/static/images/1005.png", time: "前天：18:18" },
		{ id: 4, name: '李红达', nr: "改天去看看", zan: "350", imgs: "/static/images/1006.png", time: "前天：18:18" },
	])
	
	// 点赞
	const likeCountClick = async () => {
		console.log("likeCountClick");
		const res = await articleStore.articleBehavior({
			id: Id.value,
			behavior: 1,
			action: 1
		})
		articleStore.articleDetailData.details.likeCount = articleStore.articleDetailData.details.likeCount + 1
		articleStore.articleDetailData.details.islike = true
		if(res?.success) {
			uni.showToast({
				title: res?.message
			})
		} else {
			uni.showToast({
				title: res?.message
			})
		}
	}
	
	// 收藏
	const favoriteCountClick = async () => {
		const res = await articleStore.articleBehavior({
			id: Id.value,
			behavior: 2,
			action: 2
		})
		articleStore.articleDetailData.details.favoriteCount = articleStore.articleDetailData.details.favoriteCount + 1
		articleStore.articleDetailData.details.isfavorite = true
		if(res?.success) {
			uni.showToast({
				title: res?.message
			})
		} else {
			uni.showToast({
				title: res?.message
			})
		}
	}
</script>


<style lang="scss" scoped>
	.zong {
		width: 100vw;
		// height: 100vh;
		overflow: hidden;
		padding-bottom: 150rpx;
		font-family: PingFangSC, PingFang SC;
	}

	.login_top {
		margin-top: 40rpx;
		height: 40px;
		display: flex;
		align-items: center;

		.top_p {
			flex: 1;
			text-align: center;
			font-weight: bold;
		}
	}

	.botgcar {
		height: 156rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 48rpx;

		.btn {
			width: 296rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
			color: white;
			font-size: 28rpx;
			border-radius: 40rpx;
			text-align: center;
		}
	}

	.gcar {
		width: 100vw;
		height: auto;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.goucar {
		width: 100%;
		height: auto;
		box-sizing: border-box;

		.goucar_img {
			background-color: #F3F3F3;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
		}
	}

	.goucar image {
		width: 686rpx;
		height: 896rpx;
		margin: 32rpx;
		border-radius: 16rpx;

	}

	// 轮播样式---------------
	.lunb {
		height: 422rpx;
	}

	.lunb .item {
		height: 100%;
		text-align: center;
		line-height: 400rpx;
		position: relative;

	}

	swiper-item:nth-child(1) .item {
		background-color: skyblue;

	}

	swiper-item:nth-child(2) .item {
		background-color: pink;
	}

	swiper-item:nth-child(3) .item {
		background-color: purple;
	}

	.item image {
		width: 100%;
		height: 100%;

	}

	.items {
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		color: #fff;
		font-size: 24rpx;
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.3);
		border: 2rpx solid #fff;
	}

	//-----------------------

	.top {
		width: 100%;
		height: 88rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
	}
	.box {
		width: 100vw;
		// height: calc(100vh - 120rpx);
		overflow: hidden;
		box-sizing: border-box;
		padding: 10rpx 0rpx;
	}

	.titf {
		width: 100vw;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.icons {
		width: 100vw;
		height: auto;
		box-sizing: border-box;
		padding: 22rpx;

		.icoul {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;

			.icoli {
				width: 120rpx;
				height: 120rpx;
				font-size: 24rpx;
				text-align: center;
				margin-top: 30rpx;
				margin-right: 20rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}

	.snr {
		width: 100%;

		// height: calc(100vh - 120rpx);
		// overflow: auto;
		.nr {
			padding: 32rpx;
		}
	}

	.sjtim {
		margin-left: 20rpx;
		color: #ccc;
		font-size: 24rpx;
	}

	.tx {
		width: 72rpx;
		height: 72rpx;
		border-radius: 36rpx;
		margin-right: 8rpx;
	}
	.ttop {
		width: 400rpx;
		display: flex;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.you {
		line-height: 100rpx;
		height: 100rpx;

	}

	.share {
		width: 46rpx;
		height: 46rpx;
		margin-top: 24rpx;
	}

	.you button {
		width: 160rpx;
		height: 60rpx;
		font-size: 28rpx;
		background: rgb(90, 144, 226);
		border-radius: 40rpx;
	}

	.gz {
		margin-right: 20rpx;
		margin-top: 10px;
		width: 120rpx;
		height: 55rpx;
		line-height: 55rpx;
		font-size: 28rpx;
		color: white;
		text-align: center;
		border-radius: 30rpx;
		background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
	}

	.lick {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0rpx 5rpx;
	}



	.ping {
		width: 100%;
		height: auto;
		display: flex;
		margin-top: 20rpx;
		// align-items: center;
		box-sizing: border-box;

		// padding:0rpx 30rpx;
		.child_tx {
			height: 48rpx;
			width: 48rpx;
		}
	}

	.yoww {
		font-size: 24rpx;
		width: 87%;
		box-sizing: border-box;
		padding-left: 30rpx;
		// align-items: center;
		justify-content: space-between;
		flex: 1;

		/* background: blue; */
		.yoww_con {
			flex: 1;
			display: flex;

			.con {
				flex: 1;
			}

			.yoww_name {
				font-size: 24rpx;
				color: #ccc
			}

		}
	}


	.plas {
		font-size: 26rpx;
		color: #666;
		padding: 20rpx 0rpx;
	}

	.aas {
		font-size: 24rpx;
		color: #cccccc;
		padding: 30rpx 0rpx;
		border-bottom: 2rpx solid #EAEAEA;
	}


	.ping_inp {

		margin-left: 30rpx;
		height: 72rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		flex: 1;
		background-color: #F5F5F5;
		border-radius: 36rpx;
		padding-left: 50rpx;

	}


	.bottom {
		width: 100%;
		height: 112rpx;
		padding: 20rpx 20rpx 0rpx;
		border-top: 2rpx solid #EAEAEA;
		background: white;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0rpx;
		.bottom_list {
			display: flex;
			margin-right: 10px;
			align-items: center;
		}
	}

	.cbds {
		box-sizing: border-box;
		padding: 15rpx 30rpx;
		background: #f2f2f2;
		border-radius: 40rpx;
		font-size: 24rpx;
	}

	.pltwo {
		.btnone {
			width: 110rpx;
			height: 60rpx;
			font-size: 24rpx;
		}
	}
</style>